<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI面试官 - 简历分析</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet">
    <link href="/static/css/style.css" rel="stylesheet">
    <link href="/static/css/dashboard.css" rel="stylesheet">
    <link href="/static/css/candidate/resume.css" rel="stylesheet">
    <style>
        .upload-area {
            border: 2px dashed #ccc;
            padding: 20px;
            text-align: center;
            cursor: pointer;
        }
        .upload-area.highlight {
            border-color: #66afe9;
        }
        .model-selection {
            margin-top: 20px;
            display: flex;
            align-items: center;
        }
        .model-selection label {
            margin-right: 10px;
        }
        .model-selection .model-item {
            display: flex;
            align-items: center;
            margin-right: 20px;
        }
        .model-selection button {
            margin-right: 5px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }
        .model-selection button.selected {
            background-color: #66afe9;
            color: white;
        }
        .file-info {
            margin-top: 10px;
            color: #66afe9;
        }
        .resume-section {
            margin-top: 20px;
        }
        .resume-section h2 {
            border-bottom: 2px solid #000;
            padding-bottom: 5px;
        }
        .resume-section ul {
            list-style-type: none;
            padding: 0;
        }
        .resume-section li {
            margin: 5px 0;
        }
        .skill-item {
            margin-bottom: 10px;
        }
        .skill-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .skill-bar {
            width: 100%;
            background-color: #eee;
            border-radius: 5px;
            overflow: hidden;
        }
        .skill-progress {
            height: 20px;
            background-color: #66afe9;
        }
    </style>
</head>
<body class="dashboard-page">
    <div class="dashboard-container">
        <!-- 侧边栏 -->
        <nav id="sidebar">
            <div class="sidebar-header">
                <div class="logo">
                    <i class='bx bx-bot'></i>
                    <span>AI面试官</span>
                </div>
            </div>
            <ul class="nav-links">
                <li>
                    <a href="/applicant/dashboard">
                        <i class='bx bxs-dashboard'></i>
                        <span>控制台</span>
                    </a>
                </li>
{#                <li>#}
{#                    <a href="/applicant/sim_interview">#}
{#                        <i class='bx bx-video'></i>#}
{#                        <span>模拟面试</span>#}
{#                    </a>#}
{#                </li>#}
                <li>
                    <a href="/applicant/interview">
                        <i class='bx bx-video'></i>
                        <span>面试中心</span>
                    </a>
                </li>
                <li>
                    <a href="#" data-bs-toggle="collapse" data-bs-target="#resumeMenu" aria-expanded="false" aria-controls="resumeMenu">
                        <i class='bx bx-file'></i>
                        <span>简历中心</span>
                        <i class='bx bx-chevron-down'></i> <!-- 添加展开图标 -->
                    </a>
                    <ul class="collapse" id="resumeMenu">
                        <li class="active">
                            <a href="/applicant/resume">
                                <i class='bx bx-file'></i>
                                <span>简历上传</span>
                            </a>
                        </li>
                        <li>
                            <a href="/applicant/analyze_resume">
                                <i class='bx bx-file'></i>
                                <span>简历分析</span>
                            </a>
                        </li>
                        <li>
                            <a href="/applicant/upload_resume">
                                <i class='bx bx-file'></i>
                                <span>投递简历</span>
                            </a>
                        </li>
                        <li>
                            <a href="/applicant/resume_manage">
                                <i class='bx bx-file'></i>
                                <span>简历管理</span>
                            </a>
                        </li>
                    </ul>
                </li>
{#                <li>#}
{#                    <a href="/applicant/reports">#}
{#                        <i class='bx bx-line-chart'></i>#}
{#                        <span>面试报告</span>#}
{#                    </a>#}
{#                </li>#}
{#                <li>#}
{#                    <a href="/applicant/interview_manage">#}
{#                        <i class='bx bx-line-chart'></i>#}
{#                        <span>面试管理</span>#}
{#                    </a>#}
{#                </li>#}


{##}
{#                <li>#}
{#                    <a href="/applicant/personal_center">#}
{#                        <i class='bx bx-user'></i>#}
{#                        <span>个人中心</span>#}
{#                    </a>#}
{#                </li>#}
            </ul>
        </nav>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <div class="resume-container">
                <!-- 上传区域 -->
                <div class="upload-section" id="uploadSection">
                    <div class="upload-area" id="dropZone" ondragover="handleDragOver(event)" ondrop="handleFileDrop(event)">
                        <i class='bx bx-cloud-upload'></i>
                        <h2>上传简历</h2>
                        <p>拖拽文件到此处或点击上传</p>
                        <span class="file-types">支持 PDF、Word、图片格式</span>
                        <input type="file" id="fileInput" hidden accept=".pdf,.doc,.docx,.jpg,.png" onchange="handleFileSelect(event)">
                        <button class="btn btn-primary" onclick="triggerFileInput()">
                            选择文件
                        </button>
                    </div>

                    <!-- 文件信息显示区域 -->
                    <div id="fileInfo" class="file-info" style="display: none;">
                        <p id="fileName"></p>
                        <p>已选择文件，可以上传</p>
                    </div>

                    <!-- 用户输入存储名称 -->
                    <div class="form-group">
                        <label for="storageName">存储名称:</label>
                        <input type="text" class="form-control" id="storageName" placeholder="请输入存储名称">
                    </div>

                    <!-- 上传按钮 -->
                    <button class="btn btn-primary" onclick="uploadResume()">上传简历</button>
                </div>

                <!-- 分析结果 -->
                <div class="analysis-section" id="analysisResult" style="display: none;">
                    <!-- 动态生成的内容将放在这里 -->
                </div>
            </div>
        </main>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        let selectedModel = null;

        function triggerFileInput() {
            document.getElementById('fileInput').click();
        }

        function handleFileSelect(event) {
            const file = event.target.files[0];
            if (file) {
                displayFileName(file.name);
                console.log('File selected:', file.name, 'Size:', file.size);  // 调试信息
            }
        }

        function handleFileDrop(event) {
            event.preventDefault();
            event.stopPropagation();
            document.getElementById('dropZone').classList.remove('highlight');

            const file = event.dataTransfer.files[0];
            if (file) {
                displayFileName(file.name);
                console.log('File dropped:', file.name, 'Size:', file.size);  // 调试信息
            }
        }

        function handleDragOver(event) {
            event.preventDefault();
            event.stopPropagation();
            document.getElementById('dropZone').classList.add('highlight');
        }

        function displayFileName(fileName) {
            const fileInfo = document.getElementById('fileInfo');
            const fileNameElement = document.getElementById('fileName');
            fileNameElement.textContent = `文件名: ${fileName}`;
            fileInfo.style.display = 'block';
        }

        function selectModel(modelName) {
            // 移除所有选中状态
            const buttons = document.querySelectorAll('.model-selection button');
            buttons.forEach(button => button.classList.remove('selected'));

            // 设置当前按钮为选中状态
            const selectedButton = document.querySelector(`.model-selection button[onclick="selectModel('${modelName}')"]`);
            selectedButton.classList.add('selected');

            selectedModel = modelName;
            console.log('Selected model:', selectedModel);  // 调试信息
        }

        function uploadResume() {
            const fileInput = document.getElementById('fileInput');
            const file = fileInput.files[0];
            if (!file) {
                alert('请先选择一个文件');
                return;
            }

            // 获取用户输入的存储名称
            const storageName = document.getElementById('storageName').value;
            if (!storageName) {
                alert('请输入存储名称');
                return;
            }

            // 弹窗提醒上传可能需要大约20秒
            alert('上传可能需要大约20秒左右，请耐心等待。');

            const formData = new FormData();
            formData.append('file', file);
            formData.append('storage_name', storageName);  // 添加存储名称到表单数据

            fetch('/api/upload_resume', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('文件上传成功');
                    // 显示文件的绝对路径
                    document.getElementById('fileName').textContent = `文件路径: ${data.file_url}`;
                    // 显示分析结果
                    displayAnalysisResult(data.resume_data);
                } else {
                    alert('文件上传失败: ' + data.message);
                }
            })
            .catch(error => {
                console.error('上传文件时出错:', error);
                alert('文件上传失败');
            });
        }

        function reupload() {
            document.getElementById('fileInput').value = '';
            document.getElementById('analysisResult').style.display = 'none';
            document.getElementById('fileInfo').style.display = 'none';
        }

        function displayAnalysisResult(resumeData) {
            const analysisResult = document.getElementById('analysisResult');
            analysisResult.style.display = 'block';
            analysisResult.innerHTML = '';  // 清空之前的分析结果

            // 这里可以根据resumeData的结构来动态生成内容
            for (const [section, data] of Object.entries(resumeData)) {
                const sectionDiv = document.createElement('div');
                sectionDiv.className = 'resume-section';

                const sectionTitle = document.createElement('h2');
                sectionTitle.textContent = section;
                sectionDiv.appendChild(sectionTitle);

                // 处理数据并显示
                const contentDiv = document.createElement('div');
                contentDiv.innerHTML = JSON.stringify(data, null, 2); // 以JSON格式显示
                sectionDiv.appendChild(contentDiv);

                analysisResult.appendChild(sectionDiv);
            }

            // 添加"点击分析简历"按钮
            const analyzeButton = document.createElement('button');
            analyzeButton.className = 'btn btn-primary';
            analyzeButton.textContent = '点击分析简历';
            analyzeButton.onclick = function() {
                window.location.href = '/applicant/analyze_resume';
            };
            analysisResult.appendChild(analyzeButton);
        }

        function analyzeResume() {
            const resumeId = document.getElementById('resumeSelect').value;
            const jobId = document.getElementById('jobSelect').value;

            if (!resumeId) {
                alert('请选择一份简历');
                return;
            }

            if (!jobId) {
                alert('请选择一个岗位');
                return;
            }

            if (!selectedModel) {
                alert('请选择一个分析模型');
                return;
            }

            // 显示加载弹窗
            const loadingModal = new bootstrap.Modal(document.getElementById('loadingModal'));
            loadingModal.show();

            console.log('Selected resume ID:', resumeId);  // 打印选中的简历ID
            console.log('Selected job ID:', jobId);  // 打印选中的岗位ID

            const formData = new FormData();
            formData.append('resume_id', resumeId);
            formData.append('job_id', jobId);
            formData.append('model', selectedModel);

            fetch('/api/analyze_resume', {
                method: 'POST',
                body: formData
            })
            .then(response => {
                if (response.ok) {
                    return response.json();
                } else {
                    throw new Error('分析失败: ' + response.statusText);
                }
            })
            .then(data => {
                // 隐藏关闭按钮
                const closeButton = document.querySelector('#loadingModal .btn-close');
                closeButton.style.display = 'none';

                // 添加查看报告按钮
                const modalBody = document.querySelector('#loadingModal .modal-body');
                const viewReportButton = document.createElement('button');
                viewReportButton.className = 'btn btn-primary mt-3';
                viewReportButton.textContent = '点击查看报告';
                viewReportButton.onclick = function() {
                    window.location.href = `/applicant/analyze_resume?resume_id=${resumeId}`;
                };
                modalBody.appendChild(viewReportButton);
            })
            .catch(error => {
                alert(error.message);
                // 隐藏加载弹窗
                loadingModal.hide();
            });
        }

        document.getElementById('resumeForm').addEventListener('submit', function(event) {
            const fileInput = document.querySelector('input[type="file"]');
            if (!fileInput.files.length) {
                alert('请上传简历文件');
                event.preventDefault(); // 阻止表单提交
            }
        });
    </script>
</body>
</html>